<template>
  <div class="changeversion_wrap" v-if="isShow">
    <div class="cvw_cover" @click="closeMyself"></div>
    <div class="cvw_content">
      <div class="change_c_left">
        <div class="ccl_top">1.选择版本与学段</div>

        <section class="ccl_content_wrap">
          <div v-for="item_cv in publishdata" :key="item_cv.id" class="ccl_content">
            <div
              :class="[(item_cv.id == check_publish_id)?'lc_right_true':'lc_right_false']"
              @click="chose_version(item_cv.id,item_cv.version)"
            >{{item_cv.name}}</div>
          </div>
        </section>
      </div>

      <div class="change_c_right">
        <div class="cr_top_wrap">
          <div class="cr_top_title" @click="test">更换教材</div>
          <div class="cr_top" @click="closeMyself"></div>
        </div>

        <div class="cr_title">2.选择课本</div>
        <div class="cr_content">
          <div
            :class="(item.id == book_id)?'cr_con_book_check':'cr_con_book' "
            v-for="item in booklist"
            :key="item.name"
            :style="{'background-image':'url('+item.thumb+')'}"
            @click="checkbook(item)"
          >
            &nbsp {{item.name}}
            <div :class="[(item.isAuthorized == '已授权')?'shouquan_style_true':'shouquan_style']">{{item.isAuthorized}}</div>
            <!-- <div v-show="(item.id == book_id)" class="book_yinying"></div> -->
          </div>
        </div>

        <div class="sure_style" @click="be_sure" v-show="show_sure">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { SetDownloader } from "../assets/js/setdownloader_sdk";
import school from '@/content/api/school'
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    showCancle: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      publishdata: [
        {
          name: '',
          id: '',
          data: [
            {
              isAuthorized: '',
              id: '',
              name: '',
              thumb: ''
            }
          ]
        }
      ],
      book_id: '',
      reqNum: 0,
      book_name: '',
      publisher_version: '',
      check_publish_id: '',
      booklist: [
        {
          id: '',
          name: '',
          thumb: '',
          isAuthorized: '',
        }
      ],
      isAuthorized: '',
      show_sure: false,
      loadingInstance: null,
    }
  },
  created () {
    this.book_id = localStorage.book_id
    this.check_publish_id = localStorage.publisher_id
    console.log('change version created')
  },
  watch: {
    isShow: function () {
      if (this.isShow) {
        this.get_dbdata()
      }
    },
    check_publish_id: function () {
      this.publishdata.findIndex((ele) => {
        if (ele.id == this.check_publish_id) {
          //this.booklist = ele.data

          let compare = function (obj1, obj2) {
            let val1 = obj1.sortIndex
            let val2 = obj2.sortIndex
            if (val1 < val2) {
              return -1
            } else if (val1 > val2) {
              return 1
            } else {
              return 0
            }
          }
          let cc = ele.data.sort(compare)
          this.booklist = cc
        }
      })
    },
  },
  methods: {
    test () {

    },
    closeMyself () {  //关闭插件
      this.$emit('on-close', false)
    },
    get_dbdata () {  //获取出版社数据
      //console.log('get_dbdata')
      //console.log( this.$clientSDK.isHostOnline() )
      if (!navigator.onLine) {  //没网走缓存
        console.log('no net')
        this.$db_sdk.readAll('pcDB', 'books')
          .then((res) => {
            this.publishdata = res
            this.publishdata.findIndex((ele) => {
              if (ele.id == this.check_publish_id) {
                this.booklist = ele.data
              }
            })
          })
          .catch((err) => {
            console.log(err)
          })
        return
      }

      console.log('has net')


      // this.loadingInstance = this.$loading.service({
      //   fullscreen: true,
      //   text :'加载数据中,请稍等',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      // setTimeout(() => {
      //   this.loadingInstance.close()
      // }, 15000)


      this.reqNum = 0
      school.getAllPublisher().then((res) => {
        //根据学段过滤出版社
        res.returnValue = res.returnValue.filter((item) => {
          return item.eduLevelId == localStorage.edulevel_id
        })

        this.$db_sdk.clearData('pcDB', 'publisher')
          .then((res_clear) => {
            //console.log(res_clear)

            if (res_clear.type == 'success') {  //清表成功
              this.$db_sdk.insert('pcDB', 'publisher', res.returnValue)
                .then((res_insert) => {
                  this.$db_sdk.clearData('pcDB', 'books')
                    .then((res_clear_book) => {
                      res.returnValue.forEach((item) => {
                        this.reqNum++
                        this.update_db_book(item.id, item.name, item.version)
                      })
                    })
                })
            } else {
              // this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              //   this.loadingInstance.close();
              // });

              this.$db_sdk.readAll('pcDB', 'books')
                .then((res) => {
                  this.publishdata = res
                  this.publishdata.findIndex((ele) => {
                    if (ele.id == this.check_publish_id) {
                      this.booklist = ele.data
                    }
                  })
                })
                .catch((err) => {
                  console.log(err)
                })
            }

          })

      })
        .catch((err) => {
          console.log(err)
        })
    },

    update_db_book (publisher_id, publisher_name, publisher_ver) {  //更新db_books
      const params = {

      }
      school.getBooksByPublisherId(params).then((res) => {
        //console.log(res.data)
        this.reqNum--
        let obj = {
          id: publisher_id,
          name: publisher_name,
          data: res.data.returnValue
        }
        this.$db_sdk.update('pcDB', 'books', obj)
        //this.reqNum-- 
        if (this.reqNum <= 0) {
          this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
            this.loadingInstance.close();
          });

          this.$db_sdk.readAll('pcDB', 'books')
            .then((res) => {

              this.publishdata = res
              this.publishdata.findIndex((ele) => {
                if (ele.id == this.check_publish_id) {

                  let compare = function (obj1, obj2) {
                    let val1 = obj1.sortIndex
                    let val2 = obj2.sortIndex
                    if (val1 < val2) {
                      return -1
                    } else if (val1 > val2) {
                      return 1
                    } else {
                      return 0
                    }
                  }
                  let cc = ele.data.sort(compare)
                  this.booklist = cc
                }
              })

            })
            .catch((err) => {
              console.log(err)
            })
        }
        if (res.code == -3) {
          let obj = {
            id: publisher_id,
            name: publisher_name,
            data: []
          }
          this.$db_sdk.update('pcDB', 'books', obj)

          if (this.reqNum <= 0) {
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              this.loadingInstance.close();
            });

            this.$db_sdk.readAll('pcDB', 'books')
              .then((res) => {
                this.publishdata = res
                this.publishdata.findIndex((ele) => {
                  if (ele.id == this.check_publish_id) {
                    if (ele.data.length > 0) {
                      let compare = function (obj1, obj2) {
                        let val1 = obj1.sortIndex
                        let val2 = obj2.sortIndex
                        if (val1 < val2) {
                          return -1
                        } else if (val1 > val2) {
                          return 1
                        } else {
                          return 0
                        }
                      }
                      let cc = ele.data.sort(compare)
                      this.booklist = cc
                    } else {
                      this.booklist = []
                    }
                  }
                })
              })
              .catch((err) => {
                console.log(err)
              })
          }
        }
      })
    },
    chose_version (id, version) {  //选择出版社
      this.check_publish_id = id
      this.publisher_version = version
      this.show_sure = false
    },
    checkbook (item) {  //选择书
      this.show_sure = true
      this.book_id = item.id
      this.book_name = item.name
      this.isAuthorized = item.isAuthorized
    },
    be_sure () {  //确定
      SetDownloader.destorySingleSetDownloader()

      localStorage.book_id = this.book_id
      localStorage.publisher_id = this.check_publish_id
      localStorage.book_name = this.book_name
      localStorage.publisher_ver = this.publisher_version
      localStorage.isAuthorized = this.isAuthorized
      this.$emit('on-close', true)

      if (navigator.onLine) {
        this.$http.post('/usermeta/createUserBookRecord', {
          bookId: this.book_id,
          publisherId: this.check_publish_id
        })
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      }


    }
  }
}	
</script>
<style lang="scss" scoped>
.changeversion_wrap {
  .cvw_cover {
    background: #000;
    opacity: 0.3;
    position: fixed;
    z-index: 35;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .cvw_content {
    width: 806px;
    height: 504px;
    position: fixed;
    background: #f2faff;
    top: 20%;
    left: 50%;
    margin-left: -415px;
    z-index: 40;
    border-radius: 10px;
    display: flex;
    .change_c_left {
      width: 196px;
      height: 464px;
      .ccl_top {
        margin-left: 24px;
        margin-top: 56px;
        width: 160px;
        height: 32px;
        color: white;
        line-height: 32px;
        margin-bottom: 14px;
        padding-left: 12px;
        font-size: 12px;
        cursor: pointer;
        background-image: url("../assets/img/choose_edition_head_bg@2x.png");
        background-repeat: no-repeat;
        background-size: 160px 32px;
        background-position: 0px 0px;
      }
      .ccl_content_wrap {
        width: 160px;
        height: 338px;
        overflow-y: auto;
        background-color: white;
        border-radius: 8px;
        margin-left: 24px;
        padding-top: 12px;
        .ccl_content {
          display: flex;
          height: 34px;
        }
        .lc_left_true {
          width: 4px;
          background: rgba(255, 192, 20, 1);
          border-radius: 2px;
        }
        .lc_left_false {
          width: 4px;
          border-radius: 2px;
        }
        .lc_right_true {
          width: 100%;
          line-height: 34px;
          padding-left: 25px;
          background-color: #5f90fa;
          color: white;
          cursor: pointer;
        }
        .lc_right_false {
          width: 100%;
          line-height: 34px;
          padding-left: 25px;
          color: #79808a;
          cursor: pointer;
        }
      }
    }
    .change_c_right {
      width: 100%;
      .cr_top_wrap {
        display: flex;
        .cr_top_title {
          font-size: 16px;
          height: 16px;
          margin-left: 180px;
          margin-top: 20px;
          font-weight: bold;
        }
        .cr_top {
          margin-left: 333px;
          margin-top: 24px;
          width: 16px;
          height: 16px;
          background-image: url("../assets/img/close_icon_dark@2x.png");
          background-repeat: no-repeat;
          background-size: 16px 16px;
        }
      }

      .cr_title {
        margin-top: 15px;
        color: white;
        font-size: 12px;
        margin-left: 24px;
        width: 574px;
        height: 32px;
        line-height: 32px;
        padding-left: 12px;
        background-image: url("../assets/img/choose_book_head_bg@2x.png");
        background-repeat: no-repeat;
        background-size: 574px 32px;
      }
      .cr_content {
        height: 330px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-top: 15px;
        margin-left: 24px;
        .cr_con_book {
          width: 85px;
          height: 154px;
          margin-right: 12px;
          font-weight: 500;
          padding-top: 123px;
          background-repeat: no-repeat;
          background-size: 85px 120px;
          cursor: pointer;
          position: relative;

          border: 2px solid #f2faff;
          border-radius: 2px;
          .shouquan_style {
            position: absolute;
            width: 44px;
            text-align: center;
            top: 106px;
            font-size: 10px;
            color: white;
            background-color: #a8b3c2;
          }
          .shouquan_style_true {
            position: absolute;
            width: 44px;
            text-align: center;
            top: 106px;
            font-size: 10px;
            color: white;
            background-color: #ffbb00;
          }

          .book_yinying {
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 70px;
            height: 99px;
            top: 0px;
            background-image: url("../assets/img/book_choose.png");
            background-repeat: no-repeat;
            background-position-x: 19px;
            background-position-y: 33px;
          }
        }
        .cr_con_book_check {
          width: 85px;
          height: 154px;
          margin-right: 12px;
          padding-top: 123px;
          background-repeat: no-repeat;
          background-size: 85px 120px;
          cursor: pointer;
          position: relative;
          border: 2px solid #408fff;
          border-radius: 2px;
          background-color: #81b6ff;
          color: white;
          .shouquan_style {
            position: absolute;
            width: 44px;
            text-align: center;
            top: 106px;
            font-size: 10px;
            color: white;
            background-color: #a8b3c2;
          }
          .shouquan_style_true {
            position: absolute;
            width: 44px;
            text-align: center;
            top: 106px;
            font-size: 10px;
            color: white;
            background-color: #ffbb00;
          }
        }
      }
      .sure_style {
        margin-left: 500px;
        width: 96px;
        height: 32px;
        background: rgba(64, 143, 255, 1);
        border-radius: 24px;
        text-align: center;
        line-height: 32px;
        color: white;
        cursor: pointer;
      }
    }
  }
}
</style>
















